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Good afternoon. 

I'm David Candland, User Interface design lead at Bungie. 

I've been at Bungie for over 1 5 years. This means that I was instrumental 
in creating and designing the Ul For Halo, Halo 2, Halo 3, Halo 3 ODST, 
Reach, and now Destiny. 
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Right now, you're probably wondering why I have a slide showing a 
piece of spaghetti on a wall. 

Well, let me tell you. 

Years ago, I was boiling some spaghetti and forgot to set a timer. I asked 
my wife, "how do I know when it's done?" 

"Did you seta timer?" 

(Sheepishly) "No." 

"Alright, take a piece out and throw it at the wall." 

I did as she said, and it hit the wall and it bounced right onto the count- 
er. She told me to try it again in a minute. (NOT THE SAME PIECE) When 
it sticks to the wall, it's done. 

This is a lot like the design process. You research, you calculate, you 
plan, you document and then you take your best shot and throw your 
design into the game and see if it sticks. Sometimes it does, sometimes 
you use the last iteration as a learning opportunity. The key is to keep 
trying. To be tenacious until the design has sticking power. 
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FEATURES DISCUSSED IN-DEPTH 

• The Free Cursor 

• Creating Gear icons 

• Optimizing Localization 

• Designing The Director 


Today, I'm going to discuss 4 of these "noodles", if you will; 

As I go over each of these aspects of our game, hopefully I'll give you a 
few takeaways on our design process, some technical notes, and some 
of the things we learned in creating the destiny Ul. 

These features are: 

■ The free cursor 

■ Creating Gear icons 

■ Localization Practices and Release Valves 

■ The Director 
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Let's start with the free cursor... 


THE FREE CURSOR 
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(Video) 

This is one of my characters. Let's invoke Ul to get a better look at all the 
armor I have equipped. 

Selection is controlled with this cursor that moves freely about the Ul. 
Most console games use D-pad or sticks to navigate, so a cursor on a 
console game is pretty much unheard of. 

The background counter-scrolls in the opposite direction. The left stick 
controls the cursor, leaving your right thumb for button presses or 
rotating your character preview around for a better look. 

Your inventory can fill with things like guns, armor, materials...You can 
have a lot in your inventory. 

Trying to accomplish simple functions like equipping a helmet and then 
going all the way down to equip your ghost would've taken much longer, 
and many, many clicks of the d-pad just to pull this off. 


Show Damage Types O Dismiss 
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WHY A FREE CURSOR? 


• A free cursor and tooltips allow for high information density on a single 
screen. 

• Free scrolling screens with animating interactive elements are sexy. 

• Free cursor screens work in both 4:3 and 16:9 aspect ratios. 


So, Why a free cursor? 

I just covered this first point: saving you all those clicks saves you time 
and tedious effort. 

Free scrolling screens with animating interactive elements are sexy 
Pro tip: Best way to make someone think your Ul is easy to use: make it 
sexy. Right? It becomes a little easier to overlook some of the small 
things that may get on your nerves that way. 

Free cursor screens work in both Standard Def and Wide screen aspect 
ratios without layout changes or large dead areas on HDTVs. 
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(Video) 

In this example, you can see that the cursor gives us freedom in 4:3 
aspect ratio without altering our primary layout due to the background 
counter-scrolling the content around. 

If you move the cursor from one end of the screen to the other, you will 
always have access to all content on the screen. 
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WHY A FREE CURSOR? 


A free cursor and tooltips allow for high information density on a single 
screen. 


• Free scrolling screens with animating interactive elements are sexy. 

• Free cursor screens work in both 4;3 and 16:9 aspect ratios. 

• A free cursor enables interactive elements of a screen to not be grid 
aligned. 


A free cursor enables interactive elements of a screen to not be grid 
aligned. 


DPAD navigation requires predictable, linear alignment of interactive 
elements which limits visual grouping and graphic design. 
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This is a shot of one of our maps in the game. 

If you wanted to navigate a selection from Skywatch to Mothyards using 
a d-pad, it would be guesswork. . . is it mostly right or mostly down? 

Navigating a map with a d-pad would get frustrating, you'd guess wrong 
50% of the time. 





GATEWAY 


EARTH 

0 1 Friend Online A Invite Friends Menu O Dismiss 
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FREE CURSOR GOALS 

• Spend “autoaim” time to make it feel right 

• Embrace it completely 

• Counterscrolling required 
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We'd previously prototyped using a cursor, and because of all these 
things I just explained, we came to the conclusion that we needed to 
move forward with this decision. Jason Jones (Creative Chief) agreed, 
but gave me the following goals to work from: 

It's important to work from goals. When you tell designers what to do, 
you stifle exploration. 

These were the goals: 

■ Make it feel right. "Autoaim time" Hearkens back to Halo 1 . We had 
moved from a PC platform to a console. Using your thumbs on a stubby 
stick to aim without any assistance is really hard. Our sandbox design 
team spent weeks and weeks of time to figure out target magnetism, 
bullet spread, aim assist, and all the values associated with those. 

■ Embrace it completely; no scroll bars, d-padding, required zooming or 
other modifier buttons. Point and click only. Use it everywhere, not just 
when it's necessary. 

■ Counter-scrolling is required. Early prototypes showed that felt best. 
Static elements when you move the cursor feel wrong. 
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Cursor Speed Constant to Screen Space 

Always takes the same amount of time to cross from one side of the physical screen to the other. 


Small Screen Space 



Large Screen Space 


(Video) 

When counter-scrolling, the content moves from one end of the screen 
to the other. The content of your screen essentially becomes a big 
scrollbar that operates on 2 different axis. 

As you can see, that even though the cursors are moving at the same 
speed, the one on the bottom feels faster because the counter-scrolling 
has to move at a faster rate to be able to shift that much content around. 

Big question 1 - do you vary the speed of the cursor or vary the speed of 
the background? 

Question 2 - how do you handle screens that are disproportionately 
long? Fast on one axis, then slow on the other? 

We prototyped several explorations in after Effects, and then in engine to 
try and help us find solutions to these. 
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The best solution, we realized, was to make both a non-issue; measure 
the most screen real estate we will need, and make all screens roughly 
that size. 

Smaller screens like this would have an extra large buffer, a margin of 
space on all ends to ensure they counter-scrolled at about the same 
speed as larger screens. But what about all the extra space? Pushing 
your cursor all the way to one side would scroll all your content off the 
screen. After getting it into the game, we realized this wasn't a big deal. 
Nobody chooses to move their cursor all the way to the side because 
there's nothing to see there. 

Selecting items: 

Players' thumbs are not too dexterous, especially on stubbly little 
controller sticks. Players need assistance to help you land the cursor on 
an object. We looked into two main options: 

■ Gravity well (cursor snaps to the button) 

■ Friction (cursor slows over the button) 
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Offset Cursor Behaviors 

Speed values picked arbritrariiy, only to show differences between normal, fast and slowed cursor movement. All examples are as if joystick is 
pegged all the way. 


No Effect (200 px/sec) 



Full Friction (100 px/sec) 



Friction On Enter Not Exit (1 00 px/sec) 



No Effect, Selection Based on Center Point (200 px/sec) 



Full Friction, Selection Based on Center Point (200 px/sec) 



We researched all the variables we could think of. . . what if there's less 
gravity if you pegged your sticks? How much friction? What if friction is 
only applied on the way in? Etc. We eventually prototyped each. 

After seeing it in action, we immediately ruled out the gravity well 
approach. A screen dense with icons means erratic cursor movement 
and lack of control if your cursor is constantly snapping to each button. 

Friction felt good. We got global settings from engineering to tweak the 
values. If there was too much friction, people would circumvent all the 
icons. Too little, and you cant hit targets without frustration. 


Gravity Well (S px/sec) 


Gravity Well No Acceleration (100 px/sec) 
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We eventually found the sweet spot, though there was concern about 
the varied experiences with the extreme cases of screens; those with 
densely packed icons and open screens with only a few hot spots. 

We asked our engineers for screen overrides to tweak down friction on 
dense screens, so even though cursor speed and friction varied, the 
experience felt consistent. 

The thing about design, is even though on paper and mathematically 
things may be correct, they may not feel that way, and sometimes you 
need to fudge things differently to make them feel consistent. 





It's human nature to take the path of least resistance. As humans, we're 
always cutting corners to get from one place to another, 

This created a problem with our menus. When players took the path of 
least resistance, they would find themselves leaving the menu and 
crossing over an adjacent button with the intent to get to the setting they 
want, only to have the menu disengage as soon as they left it. 

The only way around this was to move the cursor at a 90 degree angles 
-which feels unnatural. We needed some way to gauge player intent so 
when they moved the cursor off the menu in a trajectory to select an 
item at the top of the menu, we didn't pull the rug out from under them. 
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We had to calculate player intent. 

If the player is pegging the stick quickly in one direction, we can assume 
their intent is not to stop on the button directly above or below their 
current position. 

Calculating velocity is easy, you get that analog data from the sticks. 
Trajectory was a bit trickier. 

We basically did this by computing a rectangle around the Submenu 
Container bounds. The top and bottom of the rect calculated the 2 side 
points of a triangle, with the cursor location making the third point. Any 
trajectory within that triangle gave us a positive result. 

Our engineers set up debug geometry for us to test our settings with. 







(Video) 

This is what it looked like. 

When the triangle is red, that means the cursor is moving at too low of a 
velocity to trigger our solution. 

Green meant that we hit the speed threshold to ignore the cursor pass- 
ing over other buttons in the menu. 
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Show Damage Types O Dismiss 


(Video) 

The free cursor was a lot of work, we spent weeks and weeks on this 
feature. 

In the end, we were very happy with result, though we're always looking 
at ways we can improve the feature. 
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CREATING GEAR ICONS 
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GEAR ICONS 

• Represent the item visually so you can recognize your item at a 
glance 

• * . *’ • * 

• Make it feel tangible, collectible 

• Players must be able to have a lot of these 

• Make Thousands of unique icons 



Gear icons are an intrinsic part of the Ul. 
These were our goals for this feature. 
Early on we started to explore... 
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EARLY EXPLORATIONS 


Evil Otto 

Inventory 
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Are there any Ul designers in here? If so, raise your hands. 

So, everyone else, here's something you should know. When a game is in 
early development and we have no real content to put in our mock-ups, 
we make stuff up and slap in placeholder images that we find online. 

So with that caveat, please try not to read too much into these. If you're 
watching this later online, and picking things out from freeze-frames, 
like a sonic screwdriver in my inventory, or a mission on Jupiter, it’s likely 
you're just seeing something of an artist's musings in Photoshop. 

With that said - here's an early exploration of the player inventory. We 
wanted to keep the icons isolated in a panel on the side, so we could 
bring it up while the game was running. 
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This way we could see both our inventory and the vendor inventory 
simultaneously - which is pretty traditional in RPGs. 

While this was better in some respects, it covered up our ability to do 
any vendor performances as you interacted with them. It also filled the 
screen with icons - the screens became visually dense and hard to read 
at a glance. We also couldn't display very many icons at a time without 
making them fairly small. 
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To increase the item count, we tried going with overlapping icons... 
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...but that just made things harder to read and parse. 

Seeing all your gear at once Was something we were hoping to do, but 
we started to realize this wasn't probably going to work without really 
cluttering the screen. 
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We started looking at ways to nest the content. Representing each slot 
with your equipped item seemed to be a good conservation of space. 






As we were exploring inventory layout, we were also exploring icon 
appearance. 

We looked at using unique tritone palettes for each of the item types. 
While it looked more cohesive and organized, it wasn't very representa- 
tive of the items 
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At one point we tried icons with no background at all, putting progress 
on the tooltip, but it felt weird for items that had to get cropped, like a 
long sniper rifle. It also had the effect of making these feel less like 
tangible, collectible objects. 



INI 




GAME DEVELOPERS CONFERENCE’ March 14-18, 2016 ■ Expo; March 16-18, 




Progression Stream 


Currency Stream 


Loot Stream 



We experimented with icons that were longer for weapons so we could 
show the entire silhouette. 

This caused too many layout as well as technical problems 
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4 ENERGY 


10 SHIELDS 


7 AGILITY 


14 DISCIPLINE 


By this point, we found that we could quickly indicate the contents of 
each bucket with some graphical representation to the side of the icon 
rather than adding even more numbers to this screen. 

Progress towards leveling the items up was indicated by the blue meter 
in the background. We abandoned this after a while because it was 
difficult to see progress when the icons took up much of the back- 
ground, like the rocket launcher. 
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© Dismiss 


By 201 3, we had things moving in the right direction. Right before E3, 
our investment team introduced the concept of rarity, hence the back- 
ground colors to symbolize them 
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Item icon support 

As the investment game gets more fleshed out, it is becoming more apparent that people will need to be able to tell 
their gear apart. I propose that we add the following visual components to our ui icon library : 

1. Icon name 

2. Icon category 

a. Background 

b. Foreground 

C- SfaaO£S&alfif a'pha 
d. o&EmaJar value 



Currently in the ui jconjibrary tag, we have an icon name with a bitmap reference. While a single, flat list may work for 
now with just a few icons, once we start getting icons in the thousands, it will become quite unwieldy to work with. We 
should allow the investment designers to categorize and sub-categorize these to their hearts content. The icon will still 
have its unique name so we only have to pull icons from a single gear library. 

Having a bitmap preview would be great, but not required for M4. The tag structure should be: 

• Category (weapons) 

o Subcategory (personal weapons) 

■ Name ( personal weapon base hunter seraph ) 

■ Bitmap reference (background_blue4b.ui_bitmap.tft) 

■ Bitmap reference ( personal 

■ Bitmap reference (p.grson 9 J..weej).o.n .base hunter ..changecolpr 

■ Rgb value (244,184,54) 
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During our time of exploration, we tried to figure out how we were going 
to author all of these icons. 

In an attempt to reduce artist workload, the plan was to create represen- 
tative icons for each archetype, add a tint and swap out the background 
to give things variety. 
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We set them up by hand, masked them by hand, painted the change 
colors by hand, just to get a few iterations out of one small piece of art. 
Not only was this time consuming, but it was not 1 00% accurate. 

We quickly realized we were making passingly acceptable work and 
putting a lot of time into it 

So we costed an automated system. 
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This is lightbox, our internal asset viewer. It has many uses, but in Ul we 
use it for shooting icons. 

The 3D surface team authors the content. The investment team then 
assigns and names the content, adding them to a registry. 

An artist selects the items by name, usually grouped by release and adds 
them to the render queue. 
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The assets are then loaded into a lighting test environment. The artist 
has full control over the lighting. 

We have preset lighting models based off of the locations and times of 
day in the game. Each has a very distinct palette. 
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This is Venus at night, which is the most neutral, diffuse lighting preset. 
It's also perfect for icon shots. 

The models can be loaded in on their own, or equipped to a biped. Here 
it is equipped to a biped that has been render toggled off, so all you see 
are the pieces of arm gear 
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Then various rendering processes are turned off; the environment, 
anti-aliasing, bloom, reflection maps, self-shadowing, etc. 

Each class and armor type has a predefined camera and pose. 

The snapshots are taken in quick succession. 
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The files are reviewed by and artist and then brought into Photoshop 
where the photos are post-processed with automation scripts. 
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The artist then reviews the shots. 


Sometimes if the geometry is unusual, like there are big protrusions or 
bad tangents, the artist will retake the shot, or re-crop it in Photoshop. 

Now we have much more accurate coloring - we aren't using changecol- 
ors anymore. The representation of uncommon to exotic items is much 
clearer. 

Notice there are 2 of each. One for the PS3 and 360, the larger ones for 
the current generation. 

Source files are maintained just in case we end up having to reprocess 
them in the future to support something like large shots on our web site, 
or 4k resolutions. 
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I love how well these are working. I Like the nice clean alignments of a 
uniform height and width, and unlike many RPGs that have tinted 
approximations, we have actual representations. 

There's probably even someone in this audience that could rattle off 
each of these items by name. 
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OPTIMIZING LOCALIZATION 
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OPTIMIZING LOCALIZATION 

• 40% buffer 
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Destiny is translated into EFIGS (English, French, Italian, German, 
Spanish) as well as Portuguese and Japanese. 

We have been refining the loc process over the years at Bungie. Here are 
some things we are doing to streamline the process. Some of these 
concepts may be familiar to you, but there's probably a few practices 
unique to our studio. 

40% buffer 
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Just a common practice. Leave about 40% extra space for your text 
strings. 
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Reason being, different languages tend to fluctuate in length. 

There are some languages that tend to do this more often than others, 
but I'm not going to name any names. 


D E S T I N Y V 



GDC 


GAME DEVELOPERS CONFERENCE March 14-18, 2016 ■ Expo: March 16-: 


LOCALIZATION BEST PRACTICES 

• 40% buffer ' 

* • * • *• '* ***** , 

• Avg. Character counts 
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Often times writers ask for character counts. 

Unless your font is monospace, you need to give an avg expected count, 
give or take. 
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llli lilli llli lilli 

Lorem ipsum dolor sit 

WWWWWWWWWWWWWWWWW 
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Each button has the exact same number of characters (21, in case you 
were counting), but if you tell the writers they can use up to 21 charac- 
ters, they could potentially go over their allotted space depending how 
many capital Ms and Ws and how few spaces, Is, and Is there are. 

It's best to give your translators a ballpark figure, leaning on the smaller 
side - roughly somewhere between 1 8 and 23 characters here. 



WWW 
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LOCALIZATION BEST PRACTICES 

• 40% buffer . 

« Avg. Character counts . 

• Easy language preview 

• Avoid string concatenation 
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Having debug commands that allow both writers, translators, testers, 
and Ul artists to see how the interface looks in other languages has been 
extremely beneficial. 

Earlier on, our toolset required us to set the new language and reboot. 
Now we can do it on the fly, which has made the process much more 
painless. 

String concatenation isn't inherently wrong, but when done in the 
content setup by a Ul artist, you can run into problems. 
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PARTY CRASHER +1 

Legendary Shotgun 

©297 ATTACK 

I said INVITE ONLY! 


PARTY CRASHER +1 

{string 1} {string 2} 

©297 ATTACK 

I said INVITE ONLY! 


ACOPLADO +1 

Leyenda Escopta 




©297 ATAQUE 



He dicho jSOLO POR INVITACION! 



BUNGiE 


ittV 


When you replace variables, you are having a fixed sentence structure. 

These are tooltips for gun. Rarity and type: "legendary shotgun" 

If you concatenate 2 separate strings together, they are permanently 
fixed in that order. 

Are there any Spanish speakers in here? I'm guessing this probably 
sounds wrong to you - like a certain pointy-eared muppet did the 
translation for us. 
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LOCALIZATION BEST PRACTICES 

• 40% buffer . 

« Avg. Character counts . 

• Easy language preview 

« Avoid string concatenation 

• Editors and testers on staff 

• Dev language 


BUNGiE 


When we worked on Halo, we'd ship off the text strings for translation, 
wed get them back and plug them into the game. This greatly increased 
translation times and was more error prone since they didn't have a 
build to look at while they were doing the work - there was no context 
for them. 

Dev language - next page. 
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Dev language is a language sku just like Spanish, Portuguese, and 
Italian. This language, however, that does not ship. 

Why do we have a Dev Language? 


© © 


© © 

n © 

Save Changes "V Cancel Changes 


\/ 

Design Time S v 

Writer String 

V 
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PM 
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9/18/2015 2:4045 

PM 


\/ 

2/27/2015 3:1014 

PM 

{0>% 

V 

2/27/2015 3:1014 
PM 

&lb_button; Stats 
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7/2/2015 1:33:59 

PM 

Success 

V 

2/27/2015 3:1014 

PM 

Misadventure 

N/ 

2/27/2015 3:1014 

PM 

Summon Vehide 

V 

2/27/2015 3:1014 
PM 

Summoning Vehide 


V 

2/27/2015 3:1014 

{0}x 


N/ 

2/27/2015 3:1014 

PM 

Super Charged 

V 

PM 


V 

2/27/2015 3:1014 
PM 

Turn On 

V 

> 


When Ul artists are building pages, they need to plop in placeholder 
strings so the page structure is filled out. Sometimes these strings are so 
straightforward, that they don't change by the time we release the final 
game, and, as I explained earlier, some things we make up on the fly. 

Sometimes they are an inside joke, like changing "Inverted" to "pervert- 
ed." But even when the information is totally accurate but we want to 
have our writers vet them for grammar, terminology, and fictional 
consistency. So we avoid shipping placeholder strings. 

Dev strings get the idea across, and if there is anything we want to add, 
we can add notes about our intent, so the English writers understand the 
purpose of that string, and if there is any formatting that needs 
preserved. Our email alias is also available in case they have questions. 


D E S T I N Y V 


GAME DEVELOPERS CONFERENCE March 14-18, 2016 ■ Expo: March 1B-: 



LOCALIZATION BEST PRACTICES 

• 40% buffer 

« Avg. Character counts . 

• Easy language preview 

« Avoid string concatenation 

• Editors and testers on staff 

• Dev language 

• Choose the right font 
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Many fonts are missing international characters. This can make localiza- 
tion difficult without selecting a different font for other languages. 

This may be inevitable for Asian fonts. 
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What we did was find the font we wanted, then at runtime the string 
parser checks font for characters. If it can't find it, it then searches our 
custom font for the missing characters. 

Also notice the button glyphs. Our fonts are rendered on the fly as 
TrueType, and any glyphs in the font are vector based true type glyphs. 

We used to render all fonts into bitmaps, so each character and button 
icon needed maintained any time we added a new font, added a new 
size, etc. Using TrueType gives us infinitely more flexibility since the font 
and glyphs are rendered at runtime. 

Unfortunately, there's no way to specify more than one color in any 
single text character. To get around this, we came up with a clever 
solution... 
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symbols_ps4 v Q 

| .stringjable.tft % 

Schema Name: s ed 

□ Strings 2&xJ>utton V s « 


Id 

x_button 

String 

<font color- M #d884b8" >\xE020 </forrt > <font color- "#444444“ >\xE002</font> 

B Designer data 


Notes 


Owner 


Design revision 
Last approved writer revision 
Last approved writer time stamp 
Progress 

0 

0 

0 

0 : working ^1 

Time stamp 

0 

0 Writer data 


El Translator data 


Release id 

[ Release IDs 
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O " ▼ File Path: d:\bungie\v300_dev\tigef\content\ui\common\symbols\data\en\symbols_ps4.string_tab4e.tft 


For our own unique dingbats and buttons, writers specify unique string 
hashes. Those refer to a tag where we use markup language and 
Unicode references to define the character and its coloring. For multicol- 
ored buttons, a single hash references a string that contains two charac- 
ters and each one is assigned a color. 







Of course, normally this would produce two characters side-by-side. 

However, when we author the font, the character that provides the 
secondary color is intentionally misaligned and has a width of 0 so it 
lines up directly behind the character preceding it. 

So - this tech allows us to specify font sizes, custom glyphs, and interna 
tional characters at runtime without touching the original font. 

Hold .Q#.to interact ■ 

Hold $ to interact 
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LOCALIZATION RELEASE VALVES 

• ‘Scale to fit’ text fields 


BUNGiE 


All things considered, no system is perfect. Sometimes writers go over 
the recommended space, sometimes the layout doesn't allow for much 
flexibility. These are some ways we add flexibility into the localization 
process. 
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We set up a text field and give it plenty of space, however, if more 
required, we give it flexibility. 


STILL THERE? 

You have been returned to the title screen 
because you were inactive. 


Dismiss 
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ATTENTION 

You were unable to find a match in time. Please 
try again. If this problem persists, it may mean 
there is a problem with your networking setup. 
For more info please visit help.bungie.net and 
search for: 

mongoose 

Dismiss 


BUNGIE 


The vertical height is calculated on the fly, and if the content doesn't fit, 
we can push the field out taller. The height of that field is calculated, 
then that value is factored into the rest of the screen, so all the other 
elements can adjust accordingly. 
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LOCALIZATION RELEASE VALVES 

« ‘Scale to fit’ text fields 

• . > • * , * 

• Font scaling to fit single line text fields 


BUNGIE 


A 





Another way we use 'scale to fit' is the font itself. This is one of the great 
things about using trueType faces that render at runtime. 
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These are two shots of some buttons from our settings menu. As you can 
see on the bottom one, one phrase ended up being written longer than 
we anticipated. The translation into French didn't quite fit, so the text 
field is flagged to scale the font down until it does. 



English French 
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This is our internal tool, Bonobo. The middle panel is the preview area, 
and the upper right is the list of elements. A text field is selected here. 
Below that list in the bottom right is the attributes of the text field we 
have selected. 

When a single line of text has 'scale to fit' specified, we are able to set a 
minimum text size here, to insure it never scales too far down. However, 
if that isn't going to work, we are able to take even more drastic mea- 
sures. 
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LOCALIZATION RELEASE VALVES 

« ‘Scale to fit’ text fields 

.*• • . -• • * . • 

• Font scaling to fit single line text fields 

• Allow truncation 
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The truncation setting cuts strings off prematurely if they don't fit, and 
adds an ellipsis at end. 
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We are not currently using this setting anywhere, but it works like this: 
It fills up as much of the field as it can, leaving space for an ellipsis. This 
works well when the same information can be accessed elsewhere, 
rather than having the player lose that data. 


Portuguese 


Nimmerendende Schlachten 

Die Geschichte davon, wie der Huter auf 
Vorhut-Strikes ging und so half, die... 

1 Vorhut-Strikes 
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LOCALIZATION RELEASE VALVES 

• ‘Scale to fit’ text fields 

• Font scaling to fit single line text fields 

• Allow truncation 

• Scrolling text 
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Lastly, there's Scrolling text - if all else fails, and the text simply won't fit 
and you absolutely must see it all. 


There are a few cases of this in the game where we implemented a new 
feature late in the development process, and the there was no time 
remaining to safely rewrite and translate the strings that went in these 
brand new locations. 
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PATROLS AVAILABLE x 

Use Nav Mode to locat^Beacons and / 
receive missions from the Tower 


HULL 


UNABLE TO SUMMON 

Cannot summon in this locat 

GO TO ORBIT 





N MODE 





r 


'V 


\ 


161 m 


A 


>:> 

>: 



Prove Yourself Through Energy Bursts 
Energy Burst Patrols Completed 0/3 

Overcharge 3 Reached 0 /l 

TRACKED ITEMS 

Change Display A- 


(Video) 

Look at this field, it’s really tight. Now if I change language to Portu- 
guese, the text increases in length and begins to scroll. 

It's not the most elegant thing we've done, but sometimes, when all else 
fails, you need to use a little brute force. 
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DESIGNING THE DIRECTOR 
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2016 #GDC16 
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The Director is the first piece of Ul we prototyped for Destiny back 
2010. 

Jason gave us the following goals to work from: 


THE DIRECTOR 

• Create an always available, always populated list of starting 
points for adventure. 

• Incentivize players to be activity omnivores. 

• • 

• Offer direction to inexperienced players. 
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(Video) 

Keep in mind this was a very early mockup, before we had any locations 
or story figured out. The design was based on the solar system and 
exploration. 

However, this version had issues: 

■ There was too much digging in and out 

■ Everything equal, what should I do next? 



EARTH 

Back 0 
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We were expecting a lot of our Halo players to try playing our game, 
many of them just want to shoot other dudes, where is that? 

Though we "make the games that we want to play" we had to be mind- 
ful of those of us in the studio that just like to play deathmatch. Eventu- 
ally, we just started calling those types of players, "Todd, the drunken 
frat boy." How does he get to play what he wants? 
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The Director: Guide to your destinations. 



Friends online: 


\ Featured Portal: 

! The Black Garden 

E The Godhead cell is now open to 
2 you! Select this portal to discover 
: what lies beyond. 


ACTIVITIES 




We started iterating. 

We tried lots of ideas. 

Trying to design the Ul while the rest of the game was being designed 
concurrently, plans would changed daily. Anyone in game development 
knows that's just how it goes. Sometimes we'd create problems for 
ourselves by trying to solve for things like two destinations on one 
planet, or the gas giants, that didn't even make it into the sipping game. 


Player Vs Player 
Portals 

Story (Campaign) 
Weekly Achievements 
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So trying to not get hung up on the details was a challenge. 

Some designs didn't make it past b/w motion comps, some made it all 
the way into the engine. 


II 






DIRECTOR A\ 


Pants Guild 


17 
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FRIENDS © 


L* 


NEW CHAPTER 


NEW STRIKE 


HOME 


STORY 

CONTINUE FROM LAST SAVE 


BOUNTY 

COLLECT YOUR WEEKLY BONUS 


STRIKE 

DUST PALACE 


RAID 

DEPTH OF DARKNESS 


FACTION WARS 

ARENA 


I players m 


3 players ma: 


5d 16hr 25m 13 sec 


6 players max 


We had about 8-9 major revisions, each one solving the issues the last 
one had. 
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Call of the VanguacU^ 
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STRIKE INTRO 



RAID • 

The Glass Throne 


FACTION WARS 
PvP Playlist (No JIP) 
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V Conclude Chapter 1 

THE CITY,-<£ARTH STORY 
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Evil Otto 

BNG Crucible 
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XL LAUNCH ACTIVITY 


Q FRIFNDS 


We finally landed here. We had streamlined the UX, solved lots of issues, 
made it easy to do what you want and do so efficiently. 

...BUT we had totally sucked the cool out of the most important piece of 
Ul in the game. Looking back, the solar system was so neat, it provided a 
sense of exploration, wonder, and dozens of other intangibles. 

This was an Important lesson we learned - when iterating and improv- 
ing, you need to look at ALL past revisions and not the most recent one. 

Jason was the first to recognize this and call it to our attention. And 
while we'd accomplished his first set of goals, he gave us a few more to 
really clarify the important things in this design. 
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THE DIRECTOR 

• Create an always available, always populated list of starting 
points for adventure. 

• Incentivize players to be activity omnivores.- 

• Offer direction to inexperienced players. 

• Offer a sense of place. 

• Show you your past & future, provide a sense of 
accomplishment and aspiration. 

• Display dependencies between activities. 

BliN^iE D E S T I N Y V 


It was the 1 1th hour, we had a few months to ship, so we went for it, and 
changed the director one more time. 

We knew it was right, but we were very cautious. This was our last 
chance, and we had to do it right. 

We went through several visual iterations... 
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...and built a working prototype as rapidly as possible. 

We pilfered a guy from the web team to build a rapid prototype using 
HTML, CSS £r Java script. 

We were completely out of time. The specs were mostly finished and 
most details figured out, so we started executing. It's not optimal, but we 
had to move. 
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In the end, I'm very happy with result, love the design, and the solutions 
we arrived at. 

The visuals referenced ancient cartography in a sci-fi setting. 
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© 16 Friends Online 


A Invite Friends euUMH Menu Dismiss 
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THE REEF 

Asteroid Belt 
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So I've talked about our Ul and shown you stills and bits and pieces. I'd 
like to wrap things up by showing you a brief video tour that showcases 
the various elements of our Ul in action so you can see how the things 
that I've talked about today all come together. 

This is what ended up sticking to the wall. 
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A Invite Friends maiwgBi Menu Dismiss 
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Dismiss 


(Video) 






CONCLUSION 
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I hope this insight into our design process has helped. Maybe there's 
something specific you can take away in regards to the free cursor, Our 
Localization Practices, Creating Gear icons, and Designing The Director. 

Our processes are constantly changing. We're always looking for ways to 
improve the Ul in Destiny. To make it simpler and better for users to find 
the fun. 
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QUESTIONS? 

David Candland 

Twitter: @drcandland 
XBL: Evil Otto 
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Feel free to follow me on twitter or Xbox Live 
At this point I'll take questions. 
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